<%--
  Created by IntelliJ IDEA.
  User: baiyuhong
  Date: 2018/11/19
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ include file="../foreHander.jsp"%>

<!--=============================================
=            breadcrumb area         =
=============================================-->

<div class="breadcrumb-area pt-15 pb-15">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!--=======  breadcrumb container  =======-->

                <div class="breadcrumb-container">
                    <nav>
                        <ul>
                            <li class="parent-page"><a href="index.html">Home</a></li>
                            <li>Register</li>
                        </ul>
                    </nav>
                </div>

                <!--=======  End of breadcrumb container  =======-->
            </div>
        </div>
    </div>
</div>

<!--=====  End of breadcrumb area  ======-->

<!--=============================================
=            Login Register page content         =
=============================================-->

<div class="page-section mb-50">
    <div class="container">

        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-3 col-xs-12"></div>
            <div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
                <form action="/fore/foreRegister" method="post" class="regiForm" >

                    <div class="login-form">
                        <div class="regiErrorMessageDiv">
                            <%--错误提示--%>
                            <div class="alert alert-danger">
                                <span class="errorMessage">${jsrError}</span>
                            </div>
                        </div>
                        <h4 class="login-title">用户注册</h4>

                        <div class="row">
                            <div class="col-md-6 col-12 mb-20">
                                <label>姓名</label>
                                <input class="mb-0" type="text" name="name" id="name" placeholder="请输入姓名" required="">
                                <span class="help-block" style="margin-top:-20px; color: red"></span>
                            </div>
                            <div class="col-md-6 col-12 mb-20">
                                <label>密码</label>
                                <input class="mb-0" type="password" name="password" id="password" placeholder="请输入密码" required="">
                                <span class="help-block" style="margin-top:-20px; color: red"></span>
                            </div>
                            <div class="col-md-12 mb-20">
                                <label>地址:</label>
                                <input class="mb-0" type="text" name="address" id="address" placeholder="请输入地址" required="">
                                <span class="help-block" style="margin-top:-20px; color: red"></span>
                            </div>
                            <div class="col-md-5 mb-20">
                                <label>手机:</label>
                                <input class="mb-0" type="text"  name="phone" id="phone" placeholder="请输入手机号" required="">
                                <span class="help-block" style="margin-top:-20px; color: red"></span>
                            </div>
                            <div class="col-md-7 mb-20">
                                <label>验证码:</label>
                                <input name="code" id="code" class="mb-0" type="text" placeholder="请输入验证码" style="width: 45%" required="">
                                <img onclick="this.src='/defaultKaptcha?d='+new Date()*1" style="width: 50%;" src="/defaultKaptcha" alt="点击更换" >
                                <span class="help-block" style="margin-top:-20px; color: red">${msg}</span>
                            </div>


                            <div class="col-12">
                                <button type="submit" id="btn-rig" class="register-button mt-0">注册</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<!--=====  End of Login Register page content  ======-->
<script src="${pageContext.request.contextPath}/Fore/js/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //验证btn-rig
        $("form.regiForm").submit(function(){
            if($("#btn-rig").attr("ajax-va")=="error"){
                return false;
            }
            return true;
        });


        $("div.regiErrorMessageDiv").hide();
        if("${jsrError}"=="true"){
            $("span.errorMessage").html("您的注册信息有误！");
            $("div.regiErrorMessageDiv").show();
        }

    })


    //验证用户名格式以及是否重复
    $(document).on("change","#name",function(){
        var Name = $("#name").val();
        var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if(!regName.test(Name)){
            show_validate_msg("#name", "error", "用户名可以是2-5位中文或者3-16位英文和数字的组合");
            $("#btn-rig").attr("ajax-va","error");
        }else{
            show_validate_msg("#userName", "success", "");
            //用户名是否重复
            $.ajax({
                url:"/fore/nameCheck",
                data:"name="+Name,
                type:"POST",
                success:function(result){
                    if(result=="SUCCESS"){
                        show_validate_msg("#name","success","");
                        $("#btn-rig").attr("ajax-va","success");
                    }else{
                        show_validate_msg("#name","error","用户名已被注册");
                        $("#btn-rig").attr("ajax-va","error");
                    }
                }
            });
        }
    });

    //验证密码
    $(document).on("change","#password",function(){
        var Pwd = $("#password").val();
        var regPwd = /^(\w){6,20}$/;
        if(!regPwd.test(Pwd)){
            show_validate_msg("#password", "error", "密码可以是6-20个字母、数字、下划线  ");
            $("#btn-rig").attr("ajax-va","error");
        }else{
            show_validate_msg("#password", "success", "");
            $("#btn-rig").attr("ajax-va","success");
        }
    });
    //验证电话
    $(document).on("change","#phone",function(){
        var Phone = $("#phone").val();
        var regPhone =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if(!regPhone.test(Phone)){
            show_validate_msg("#phone", "error", "手机号格式不正确");
            $("#btn-rig").attr("ajax-va","error");
        }else{
            show_validate_msg("#phone", "success", "");
            $("#btn-rig").attr("ajax-va","success");
        }
    });

    //提取显示校验结果的提示信息
    function show_validate_msg(ele,status,msg){
        if("success"==status){
            $(ele).next("span").text(msg);
        }else if("error" == status){
            $(ele).next("span").text(msg);
        }
    }


</script>

<%@ include file="../foreFooter.jsp"%>
